import React from 'react';
import {
    Row,
    Col,
    Table,
    Button,
    Modal,
    Form,
    message
} from 'antd';
import axios from 'axios';
import { config } from 'utils';
import { Input } from 'antd';
import format from '../../BusStation/RentAdmin/format.js';
import "../common.less";
import { Select,DatePicker  } from 'antd';
const Option = Select.Option;
const { TextArea } = Input;
const FormItem = Form.Item;
class Suggestions extends React.Component {
    constructor(props) {
        super(props);
        const user = JSON.parse(sessionStorage.getItem("user"));
        this.that = this;
        this.state = {
            dataSource: [],
            loading: false,
            visible: false,
            visibleCom: false,
            user: user,
            pagination: {
                current: 1,
                pageSize: 10
            },
            onChange: this.onChange,
            key: '',
            limit:'',
            submitTime:''
        };
    };

    componentDidMount() {
        this.getSuggestion();
    };
    search(value){
        this.setState({key:value});
        this.getSuggestion({key:value});
    };
    handleChange=(value)=> {
        //console.log(`selected ${value}`);
        this.setState({limit:value});
        this.getSuggestion();
    }
    // timeChange=(value, dateString)=> {
    //     console.log('Selected Time: ', value);
    //     console.log('Formatted Selected Time: ', dateString);
    //     // this.setState({submitTime:dateString});
    //     // this.getSuggestion({submitTime:dateString});
    // }
    onChange = (pagination, filters, sorter) => {
        this.getSuggestion({
            sortField: sorter.field,
            sortOrder: sorter.order,
            page: pagination.current,
            key: this.state.key,
            limit:this.state.limit,
            submitTime:this.state.submitTime,
            ...filters
        });
    };
    getSuggestion = (params = {}) => {
        const token = sessionStorage.getItem("token");
        this.setState({ loading: true });
        var key=typeof(params.key)==="undefined"
        ?''
        :params.key;
        var limit=typeof(params.limit)==="undefined"
        ?''
        :params.limit;
        var submitTime=typeof(params.submitTime)==="undefined"
        ?''
        :params.submitTime;
        const url = `${config.api}CustomService/GetWebAdvice?page=${params.page}&pageSize=${this.state.pagination.pageSize}&key=${key}&limit=${this.state.limit}&submitTime=${submitTime}`;
        //console.log(url)
        axios.get(url, { headers: { Authorization: 'Bearer ' + token } }).then((data) => {
            // console.log(data)
            const pagination = {
                ...this.state.pagination
            };
            pagination.total = data.data.pageList.totalRows;
            pagination.current = params.page;
            //console.log(data.data.tradersInfo);
            this.setState({ loading: false, dataSource: data.data.pageList.collections, pagination });
        });
    }
    // 编辑回复模态框
    showModalCompile = (e, record) => {
        this.setState({
            visibleCom: true,
        });
        //console.log(record)
        this.setState({
            suggestId: record.id,
            isdo: record.isdo
        })
    }
    handleOkCompile = (e) => {
        this.setState({
            visibleCom: false,
        });
    }
    handleCancelCompile = (e) => {
        this.setState({
            visibleCom: false,
        });
    }
      CompileSubmit = (e) => {
        e.preventDefault();
        const token = sessionStorage.getItem("token");
        const params = this.props.form.getFieldsValue();
        const user = this.state.user;
        axios.post(`${config.api}CustomService/ReventAdvice`, { reventContent: params.reventContent, adviceid: this.state.suggestId, UserName: user.UserName,   }, { headers: { Authorization: 'Bearer ' + token } }).then((data) => {
            if (data.data.result) {
                this.getSuggestion();
                message.success('回复成功！')
            } else {
                message.warning(data.data.errorMessage)
            }
        });
        this.setState({
          visible: false,
        });
      }

    // 编辑工作內容模态框结束~~
    handleCancelCompile = (e) => {
        this
            .props
            .form
            .resetFields();
        this.setState({
            visibleCom: false,
        });
    }

    render() {
        const Search = Input.Search;
        const scroll = {
            y: 600
        };
        const column = [
            {
                title: "姓名",
                dataIndex: "name",
                width: 120
            },
            {
                title: "电话",
                dataIndex: "tel",
                width: 120
            },
            {
                title: "查看码",
                dataIndex: "code",
                width: 120
            },
            {
                title: "类型",
                dataIndex: "kind",
                width: 120
            },
            {
                title: "投诉建议",
                dataIndex: "advice",
                width: 350
            },
            {
                title: "回复",
                dataIndex: "revent",
                width: 350
            },
            {
                title: "提交时间",
                dataIndex: "submitTime",
                width: 160,
                render: (text, record) => {
                    return (
                        <span>{format.format(record.submitTime)}</span>
                    )
                }
            },
            {
                title: "回复时间",
                dataIndex: "reventTime",
                width: 160,
                render: (text, record) => {
                    return (
                        <span>{format.format(record.reventTime)}</span>
                    )
                }
            },
            {
                title: '操作',
                width: 150,
                key: 'action',
                render: (text, record) => {
                    return (
                        <Button type="primary" ghost onClick={(e, record) => { this.showModalCompile(e, text) }} disabled={record.isdo == 0 ? '' : 'disabled'}>回复</Button>
                    )
                }
            }
        ];
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: {
                    span: 10
                },
                sm: {
                    span: 6
                }
            },
            wrapperCol: {
                xs: {
                    span: 10
                },
                sm: {
                    span: 14
                }
            }
        };
        return (
            <div>
                <Modal
                    title="编辑"
                    visible={this.state.visibleCom}
                    onOk={this.handleOkCompile}
                    onCancel={this.handleCancelCompile}
                    footer={null}
                >
                    <Form onSubmit={this.CompileSubmit}>

                        <FormItem {...formItemLayout} label={(
                            <span>
                                回复内容

                    </span>
                        )} hasFeedback>
                            {getFieldDecorator('reventContent', {
                                rules: [
                                    {
                                        required: true,
                                        message: '请输入回复内容!',
                                        whitespace: true
                                    }
                                ]
                            })(<TextArea rows={4} />)}
                        </FormItem>
                        <Row>
                            <Col span={24}>
                                <FormItem className="center">
                                    <Button type="primary" className="submitBtn" htmlType="submit">提交</Button>
                                    <Button onClick={this.handleCancelCompile}>取消</Button>
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </Modal>

                <Row gutter={8} style={{ marginTop: '20px' }}>
                    <Col span={24}>
                    <Search placeholder="姓名/电话"
                            style={{
                             width: 200
                                    }}
                    onSearch={value => this.search(value)} />
                    <Select  defaultValue="1"
                            showSearch
                            style={{ width:' 200px',marginLeft:'30px',marginRight:'30px' }}
                            optionFilterProp="children"
                            onChange={this.handleChange}
                            filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                        >
                            <Option value="1">所有</Option>
                            <Option value="2">已回复</Option>
                            <Option value="3">未回复</Option>
                        </Select>
                    {/* <DatePicker
                        showTime
                        format="YYYY-MM-DD"
                        placeholder="Select Time"
                        onChange={this.timeChange}
                    /> */}
                        <Table className="center"
                            {...this.state}
                            rowKey={record => record.id}
                            border={true}
                            columns={column}
                            scroll={scroll}
                        />

                    </Col>
                </Row>
            </div>
        )
    }
}
const Suggestion = Form.create()(Suggestions);
export default Suggestion
